<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>banner</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        html,body {
            background-color: transparent !important;
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        #footer{  background-color: #ffffff; }
        .select-block{
            width:1.30rem;
            height:0.43rem;
            background-color: #F8E9E4;
            border-radius: 0.02rem;
            margin: 0.15rem 0.15rem 0rem 0.15rem;
            color: #A0522C;
            justify-content: center;
            align-items: center;
        }
        .selected-block{
            width:1.30rem;
            height:0.43rem;
            background-color: #A0522C;
            border-radius: 0.02rem;
            margin: 0.15rem 0.15rem 0rem 0.15rem;
            color: white;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <div class="flex" id="main" style="height: 100%;" tapmode onclick="closeFrameNone();">

    </div>
    <div id="footer" style="width: 100%; height: 2.53rem">
        <div class="flex" style="height: 0.46rem; justify-content: space-between; align-items: center;">
            <p style="font-size: 0.16rem; color: #7C7272; margin-left: 0.22rem;" tapmode onclick="closeFrameNone();">取消</p>
            <p style="font-size: 0.16rem; color: #231313;">选择时段</p>
            <p style="font-size: 0.16rem; color: #A0522C; margin-right: 0.22rem;" tapmode onclick="confirmTime();">确定</p>
        </div>
        <div id="select-el" class="flex" style="height: 2.00rem; overflow-y:scroll; flex-wrap: wrap; padding: 0.03rem 0.27rem 0 0.27rem"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var dateTime, duration, selectData = [], selectEl;
    apiready = function () {
        $api.fixTabBar($api.byId('footer'));

        selectEl = $api.byId("select-el");
        dateTime = api.pageParam.date;

        getTime()
    }

    function getTime() {
        duration = api.pageParam.duration;

        for (var i=0,leni=duration.length; i<leni; i++)
        {
            $api.append(selectEl,
                '<div begin="' + duration[i]['begin'] + '" end="' + duration[i]['end'] + '" class="flex select-block" tapmode onclick="timeChange(this)">' +
                    '<p style="font-size: 0.14rem;">' + duration[i]['begin'] + "-" + duration[i]['end'] + '</p>' +
                '</div>');
        }
    }

    function timeChange(el) {
        var selectedEl = $api.dom(".selected-block");
        if (selectedEl != undefined) {
            if (selectedEl == el) {
                return;
            } else {
                $api.removeCls(selectedEl, "selected-block");
            }
        }
        selectData['begin'] = $api.attr(el,'begin');
        selectData['end'] = $api.attr(el,'end');
        $api.addCls(el, "selected-block");
    }

    function closeFrameNone() {
        api.closeFrame({
            name: 'backGround',
        });
        api.closeFrame();
    }

    function confirmTime() {
        let beginDate = dateTime + " " + selectData['begin']+":00";
        var beginTime=new Date(Date.parse(beginDate.replace(/-/g, "/"))).getTime();
        beginTime = beginTime/1000;

        let endDate = dateTime + " " + selectData['end']+":00";
        var endTime=new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
        endTime = endTime/1000;

        if (selectData['begin'] != undefined) {
            api.ajax({
                url: apiUrl + '/inquiry/video-booking',
                tag: '/inquiry/video-booking',
                method: 'post',
                data: {
                    values: {
                        token: $api.getStorage("token"),
                        master_id: api.pageParam.master_id,
                        time_begin: selectData['begin'],
                        time_end: selectData['end'],
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    if (ret.code == 0) {
                        api.openWin({
                            name: 'masterBookingSuccessWin',
                            url: './masterBookingSuccessWin.html',
                            slidBackType: 'edge',
                            pageParam: {
                                name: api.pageParam.name,
                                date: dateTime,
                                time_begin: selectData['begin'],
                                time_end: selectData['end'],
                            },
                            animation: {
                                type:"movein",
                                subType:"from_right",
                                duration:300
                            }
                        });

                        closeFrameNone();
                    } else {
                        api.toast({
                            msg: ret.err_msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                } else {
                    // api.alert({ msg: JSON.stringify(err) });
                }
            });
        } else {
            api.toast({
                msg: "请选择时间段",
                duration: 2000,
                location: 'middle'
            });
        }
    }
</script>
